<template>
  <div class="block full user_index">
    <div class="block-title">
      <h2>已备份数据</h2>
    </div>
    <div class="table-responsive">
      <table id="example-datatable" class="table table-striped table-bordered table-vcenter">
        <tbody>
        <tree v-if="list.length" :lists="list" :expandFunc="_GetClickHandle"  :callbackFunc="_callBackHandle"></tree>
        </tbody>
      </table>
    </div>
    <loading v-if="loadAt"></loading>
  </div>
</template>
<script type="text/ecmascript-6">
  import http from '../../static/http/http';
  import tree from '../../components/comment/tree_grid/tree'
  import {mapState, mapMutations} from 'vuex'
  import loading from '../../components/comment/loading/loading'
  import _    from  'lodash';
  const ERROR_CODE   = 1001;
  export default{
    name: 'backupIndex',
    data(){
      return {
        list:[],
      }
    },
    created(){
        this._getBackupInfo()
    },
    computed:{
      ...mapState({
        loadAt:'loading'
      })
    },
    methods: {
      ...mapMutations({
        set_loadAt:'set_loading'
      }),
     _getBackupInfo(){
        this.set_loadAt({code:100,meta:true});
        this.apiGet('/api/admin/Backup/indexInfo').then((response) => {
              let list            = response.data.list;
              let error_code      = response.data.status;
              if(error_code!==ERROR_CODE){
                this.$nextTick(()=> {
                  this.list      = [...list];
                });
                this.set_loadAt({code: 120, meta: false, custom_info: response.data.info});
                return false;
              }
             this.set_loadAt({code: 120, meta: false, custom_info: response.data.info});
        }).catch((response) => {
          this.set_loadAt({code: 102, meta: false,custom_info:response});
        })
      },
      // tree点击的回调函数回传当前点击的数据
      _callBackHandle(item){
          //接收当前点击的节点 do something ajax 都可以操作
        console.log(item);
      },
      // 拿到当前的数据和点钱的children数据 do  something ajax 都可以操作
      _GetClickHandle(item,children){
          //接收当前所有的字节点 do something
          console.log(item,children)
      }
    },
    components:{tree,loading},
    mixins: [http]
  }
</script>
<style type="stylus">
  .edit-enter-active, .edit-leave-active {
    transition: all .4s;
  }
  .edit-enter, .edit-leave-active {
    transform: translate3d(2rem, 0, 0);
    opacity: 0;
  }

  .paginate-enter-active, .paginate-leave-active {
    transition: all .4s;
  }

  .paginate-enter, .paginate-leave-active {
    transform: translate3d(2rem, 0, 0);
    opacity: 0;
  }
</style>

